<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网上营业厅</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="bookmark" href="images/favicon.ico" type="image/x-icon" />

<script type="text/javascript" src="../layui/lay/modules/layer.js"></script>
<script src="../layui/layui/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="../layui/layui.js" charset="utf-8"></script>
</head>
<style>
		body{
		background-size:100%,100%;
		overflow:hidden;
	}
		body{
		background-size:100%,100%;
		overflow:hidden;
	}
	.vali_pass {
  width: 350px;
  margin: 0 auto;
  padding: 10px;
  border: #eee 1px solid;
  text-align: center;
}
.vali_pass input {
  width: 96%;
  display: block;
  margin: 0;
  padding: 5px;
  font-size: 14px;
  line-height: 20px;
}
.vali_pass_progress {
  margin-top: 10px;
  background-color: #efefef;
  height: 10px;
  border-radius: 5px;
}
.vali_pass_inner_progress {
  display: block;
  height: 100%;
  background-color: transparent;
  border-radius: 5px;
  width: 100%;
}
.error {
 background-color: #ff3300;
}
.middle {
 background-color: gold;
}
.strong {
 background-color: green;
}
.baise {
 background-color: #FFFFFF;
}
</style>
<style type="text/css">     
    .mask {       
            position: absolute; top: 0px; filter: alpha(opacity=60); 
            z-index: 1002; left: 0px;              
			background:url(/wsyyt/layui/layui/img/jz.gif) no-repeat center rgba(0,0,0,0.5) ;
		  	background-size:30px 30px;
			background-repeat: no-repeat;
			background: 
        }     
</style>   
<body background="../images/login.png">
<div align="center" id="mask" class="mask"></div>   
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<div align="center">
		<div id="left">
		<div align="center" class="layui-tab layui-tab-card " style="width: 40%;height: 40%">
			<ul class="layui-tab-title">
				<li><font size="3">请仔细填写您的信息</font></li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
			  <form id="form" class="layui-form" action="">
			    <label class="layui-form-label">身份证号码 : </label>
					<div class="layui-input-inline" style="width: 75%">
						<input name="sfzh" id="sfzh" class="layui-input" type="text"autocomplete="off" lay-verify="required|number">
					</div>
					
					<br> <br> 
					 <label class="layui-form-label">公积金账号 : </label>
					<div class="layui-input-inline" style="width: 75%">
						<input name="gjjzh" id="gjjzh" class="layui-input" type="text"autocomplete="off" lay-verify="required|number">
					</div>
					
					<br> <br> 
					<label class="layui-form-label">短信验证码 : </label>
					<div class="layui-input-inline" style="width: 53%">
						<input name="dxyz" id="dxyz" class="layui-input" type="text"autocomplete="off" lay-verify="required|number">
					</div>
					<div class="layui-input-inline">
						<input onclick="settime(this);fs()" type="button" class="layui-btn layui-btn-primary" value="发送验证码">
					</div>
					
					<br> <br> 
					<label class="layui-form-label">您的密码 : </label>
					<div class="layui-input-inline" style="width: 53%">
						<input name="password" onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)" id="password" class="layui-input" type="password"autocomplete="off" lay-verify="required|number">
					</div>
					<div class="layui-input-inline">
					<table width="100%" height="22" style='display:inline'>  
					<tr align="center">  
					<td width="33%" id="strength_L" style="font-size:18px;">弱&nbsp;&nbsp;</td>  
					<td width="33%" id="strength_M" style="font-size:18px;">中&nbsp;&nbsp;</td>  
					<td width="33%" id="strength_H" style="font-size:18px;">强&nbsp;&nbsp;</td>  
					</tr>  
					</table>  
					</div>
					<br> <br> 
					<label class="layui-form-label">确认密码 : </label>
					<div class="layui-input-inline" style="width: 75%">
						<input name="qpassword" id="qpassword" class="layui-input" type="password"autocomplete="off" lay-verify="required|number">
					</div>
					<br>
					<br>
					<input type="hidden" id="Category" name="Category" value="1">
					<center>
					<a id="submit" class="layui-btn layui-btn-primary">确认提交</a>
					<input id="cz" type="button" class="layui-btn layui-btn-primary" value="返回登录界面">
					</center>
					</form>
				</div>
			</div>
		</div>
	</div>
  </div>
  
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		layui.use('element', function() {
			var $ = layui.jquery, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
		});
	</script> 
	<script type="text/javascript">
	
	function getPath() {  	     
	        return 'http://'+location.host;
	}
	 function CharMode(iN){  
if (iN>=48 && iN <=57) //数字  
return 1;  
if (iN>=65 && iN <=90) //大写  
return 2;  
if (iN>=97 && iN <=122) //小写  
return 4;  
else  
return 8;   
}  
//bitTotal函数  
//计算密码模式  
function bitTotal(num){  
modes=0;  
for (i=0;i<4;i++){  
if (num & 1) modes++;  
num>>>=1;  
}  
return modes;  
}  
//返回强度级别  
function checkStrong(sPW){  
if (sPW.length<=4)  
return 0; //密码太短  
Modes=0;  
for (i=0;i<sPW.length;i++){  
//密码模式  
Modes|=CharMode(sPW.charCodeAt(i));  
}  
return bitTotal(Modes);  
}  
//显示颜色  
function pwStrength(pwd){  
O_color="#eeeeee";  
L_color="#FF0000";  
M_color="#FF9900";  
H_color="#33CC00";  
if (pwd==null||pwd==''){  
Lcolor=Mcolor=Hcolor=O_color;  
}  
else{  
S_level=checkStrong(pwd);  
switch(S_level) {  
		case 0: 
		Lcolor=Mcolor=Hcolor=O_color;  
		case 1: 
		Lcolor=L_color;  
		Mcolor=Hcolor=O_color;  
		break;  
		case 2: 
		Lcolor=Mcolor=M_color;  
		Hcolor=O_color;  
		break;  
		default:  
		
		Lcolor=Mcolor=Hcolor=H_color;  
	}  
}  
document.getElementById("strength_L").style.background=Lcolor;  
document.getElementById("strength_M").style.background=Mcolor;  
document.getElementById("strength_H").style.background=Hcolor;  
return;  
}  
	</script>
     <script type="text/javascript" src="../layui/lay/modules/layer.js"></script>
	<script type="text/javascript" src="../layui/layer.ext.js"></script>
      <script type="text/javascript">
     function s(){     
        $("#mask").css("height",$(document).height());     
        $("#mask").css("width",$(document).width());     
        $("#mask").show();     
	    }  
	    //隐藏遮罩层  
	    function hide(){     
	          
	        $("#mask").hide();     
	    }  
    	  $("#submit").click(function(){
    		 
        	  var a=$("#sfzh").val();
        	  var b=$("#gjjzh").val();
        	  var f=$("#dxyz").val();
        	  var g=$("#password").val();
        	  var h=$("#qpassword").val();
       			  if(a=="" || a==null){
        			   layer.alert("身份证号不能为空！");   
        		  }else if(a.length!=18){
					   layer.alert("身份证号不合法请重新输入！");   
				  }else if(b==""||b==null){
        			   layer.alert("公积金账号不能为空！");      	
        		  }else if(b.length!=12 ){
        			   layer.alert("公积金账号输入不合法！");     	  
        		  }else if(f=="" || f==null){
        			   layer.alert("短信验证不能为空！");     		  
        		  }else if(g=="" || g==null){
        			   layer.alert("密码不能为空！");     		  
        		  }else if(h=="" || h==null){
        			   layer.alert("确认密码不能为空！");     		  
        		  }else if(g!=h){
        			   layer.alert("两次密码输入不一致！");     		  
        		  }else if(g.length<6){
        		       layer.alert("密码不能小于6位！");  
        		   }else if(!/([a-zA-Z]+[0-9]+|[0-9]+[a-zA-Z])/.exec(g)){
				       layer.alert("密码输入错误，密码由字符和数字组成！");
        		  }else if(a!="" && f!="" && g!="" && h!="" && b!="" && g.length > 5){
        		  s();
						$.ajax({
							url : getPath()+'/wsyyt/mimacontroller/ptzh',
							method : 'post',
							dataType : 'JSON',
							data: {'sfzh':a,'dxyz':f,'password':g,'grzh':b},
							success : function(result) {
							hide();
								var code = result.code;
								if(code==0){
									layer.alert('找回成功', {
								      skin: 'layui-layer-molv' //样式类名  自定义样式
								     ,closeBtn: 1    // 是否显示关闭按钮
								      ,anim: 1 //动画类型
								      ,btn: ['确认','取消'] //按钮
								      ,icon: 6    // icon
								      ,yes:function(){
								          window.location.href =getPath()+'/wsyyt/login/login.html';
								      }
								     ,btn2:function(){
								         window.location.href =getPath()+'/wsyyt/login/PT_zhmm.html';
								     }});					 								  
								}else{	
									layer.alert(result.CW, {
								      skin: 'layui-layer-molv' //样式类名  自定义样式
								     ,closeBtn: 1    // 是否显示关闭按钮
								      ,anim: 1 //动画类型
								      ,btn: ['确认','取消'] //按钮
								      ,icon: 5    // icon
								      ,yes:function(){
								         window.location.href =getPath()+'/wsyyt/login/PT_zhmm.html';
								      }
								     ,btn2:function(){
								         window.location.href =getPath()+'/wsyyt/login/PT_zhmm.html';
								     }});
								}
							}
					});		

			};
	});
	function fs(){
		 var a=$("#sfzh").val();
         var b=$("#gjjzh").val();
		if(a==""){
			layer.alert("身份证号码不能为空！");	
		}else if(a.length!=18){
			layer.alert("身份证号不合法请重新输入！");   
		}else if(b==""){
			layer.alert("公积金账号不能为空！");
		}else if(b.length!=12 ){
        	layer.alert("公积金账号输入不合法！");     	 
		}else if(a!="" && b!=""){
		s();
			$.ajax({
				url : getPath()+'/wsyyt/zccontroller/grdx',
				method : 'post',
				dataType : 'JSON',
				data: {'sfzh':a,'gjjzh':b},
				success : function(result) {
					var code = result.code;
					hide();
					if(code==0){
						layer.alert("短信验证码已发送至"+result.data[0].手机+"请注意查收！");		  
					}else{	
						layer.alert(result.CW);	
					}
				}
			});
		}
	};
	$("#cz").click(function(){
		window.location.href =getPath()+'/';
	});
      </script>
      <script type="text/javascript"> 
			var countdown=60; 
			function settime(obj) { 
				 var a=$("#sfzh").val();
		         var b=$("#gjjzh").val();
				if(a==""){
				}else if(a.length!=18){
				}else if(b==""){
				}else if(b.length!=12 ){
				}else if(a!="" && b!=""){
					    if (countdown == 0) { 
					        obj.removeAttribute("disabled");    
					        obj.value="发送短信验证码"; 
					        countdown = 60; 
					        return;
					    } else { 
					        obj.setAttribute("disabled", true); 
					        obj.value="重新发送(" + countdown + ")"; 
					        countdown--; 
					    } 
					    setTimeout(function() { 
					    settime(obj);}
					    ,1000);
				};
			
			};
	</script>
</body>
</html>